<template>
  <div class="processInfo" v-loading="openAccountProcessLoading">
    <span> 你好, 时间轴!</span>
    <!-- <div style="display:flex; width:900px;margin:100px auto;"> -->
    <div class="timeLineTitle">
      <div class="timeLineItem">
        <div class="finish timeLineStatus"></div>
        <div>已完成</div>
      </div>
      <div class="timeLineItem">
        <div class="being timeLineStatus"></div>
        <div>进行中</div>
      </div>
      <div class="timeLineItem">
        <div class="wating timeLineStatus"></div>
        <div>待开始</div>
      </div>
      <div class="timeLineItem">
        <div class="timeOut timeLineStatus"></div>
        <div>超时警告</div>
      </div>
    </div>
    <el-timeline
      style="margin-left: 100px; margin-top: 10px;"
      id="timeLineDate"
    >
      <el-timeline-item
        v-for="(activity, index) in activities"
        :key="index"
        icon="el-icon-timer"
        type="primary"
        size="large"
        :timestamp="activity.timestamp"
        placement="top"
      >
        <div style="display:flex;">
          <timeLine :timeLineList="activity.timeLineList"></timeLine>
        </div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
import timeLine from "../timeline/Timeline.vue";
export default {
  name: "HomePage",
  components: { timeLine },
  data() {
    return {
      openAccountProcessLoading: false,
      activities: [
        {
          timestamp: "4月1日",
          timeLineList: [
            {
              status: "",
              timestamp: "10：00",
              info: "BOSS账单",
              timeLineBranch: [
                { timestamp: "10:00", status: "being", info: "BOSS账单" },
                {
                  timestamp: "12:00",
                  status: "wating",
                  info: "CB用户资料下载",
                },
                {
                  timestamp: "4月30日 12:00",
                  status: "wating",
                  info: "CB用户资料下载",
                },
              ],
            },
            {
              status: "wating",
              timestamp: "12：00",
              info: "入会",
            },
            {
              status: "finish",
              timestamp: "13：00",
              info: "BOSS收入划拨",
            },
            {
              status: "wating",
              timestamp: "12：00",
              info: "入会",
            },
            {
              status: "finish",
              timestamp: "13：00",
              info: "BOSS收入划拨",
            },
          ],
        },
        {
          timestamp: "4月3日",
          timeLineList: [
            {
              status: "finish",
              timestamp: "13：00",
              info: "工作室更名为：西安拓美网络科技有限公司3",
            },
            {
              status: "finish",
              timestamp: "14：00",
              info: "工作室更名为：西安拓美网络科技有限公司4",
              timeLineBranch: [
                { timestamp: "4月1日", status: "timeOut", info: "佣金结算" },
                { timestamp: "4月1日", status: "timeOut", info: "z端用户结算" },
                { timestamp: "10:00", status: "being", info: "BOSS账单" },
                {
                  timestamp: "12:00",
                  status: "wating",
                  info: "CB用户资料下载",
                },
                {
                  timestamp: "4月30日 12:00",
                  status: "wating",
                  info: "CB用户资料下载",
                },
              ],
            },
            {
              status: "finish",
              timestamp: "16：00",
              info: "工作室更名为：西安拓美网络科技有限公司5",
            },
            {
              status: "finish",
              timestamp: "18：00",
              info: "工作室更名为：西安拓美网络科技有限公司6",
            },
            {
              status: "finish",
              timestamp: "16：00",
              info: "工作室更名为：西安拓美网络科技有限公司5",
            },
            {
              status: "finish",
              timestamp: "18：00",
              info: "工作室更名为：西安拓美网络科技有限公司6",
            },
          ],
        },
        {
          timestamp: "4月5日",
          timeLineList: [
            {
              status: "finish",
              timestamp: "16：00",
              info: "工作室更名为：西安拓美网络科技有限公司5",
            },
            {
              status: "finish",
              timestamp: "18：00",
              info: "工作室更名为：西安拓美网络科技有限公司6",
            },
          ],
        },
        {
          timestamp: "4月6日",
          timeLineList: [
            {
              status: "finish",
              timestamp: "20:00",
              info: "工作室更名为：西安拓美网络科技有限公司03",
            },
            {
              status: "finish",
              timestamp: "22:00",
              info: "工作室更名为：西安拓美网络科技有限公司02",
            },
            {
              status: "finish",
              timestamp: "2016-10-6",
              info: "工作室更名为：西安拓美网络科技有限公司01",
              timeLineBranch: [
                { timestamp: "4月1日", status: "timeOut", info: "z端用户结算" },
                { timestamp: "10:00", status: "being", info: "BOSS账单" },
                {
                  timestamp: "12:00",
                  status: "wating",
                  info: "CB用户资料下载",
                },
                {
                  timestamp: "4月30日 12:00",
                  status: "wating",
                  info: "CB用户资料下载",
                },
              ],
            },
            {
              status: "being",
              timestamp: "20:00",
              info: "工作室更名为：西安拓美网络科技有限公司03",
            },
            {
              status: "finish",
              timestamp: "22:00",
              info: "工作室更名为：西安拓美网络科技有限公司02",
            },
            {
              status: "finish",
              timestamp: "2016-10-6",
              info: "工作室更名为：西安拓美网络科技有限公司01",
            },
            {
              status: "finish",
              timestamp: "20:00",
              info: "工作室更名为：西安拓美网络科技有限公司03",
            },
            {
              status: "finish",
              timestamp: "20:00",
              info: "工作室更名为：西安拓美网络科技有限公司03",
            },
          ],
        },
      ],
    };
  },
  created() {
    // do
  },
  methods: {
    // do
  },
};
</script>

<style scoped lang="less">
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
  width: 100%;
}
a {
  color: #42b983;
}
// .main-wrapper{
//     background-color: #fff;
// }
.processInfo {
  background-color: #fff;
}
.timeLineTitle {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */

  .timeLineItem {
    display: flex;
    padding: 20px;
    font-size: 12px;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
  }
  .timeLineStatus {
    width: 12px;
    height: 10px;
    margin: 10px;
    border-radius: 2px;
  }
  .finish {
    background-color: #65bdaf;
  }
  .being {
    background-color: #eabd60;
  }
  .wating {
    background-color: #e2e9f9;
  }
  .timeOut {
    background-color: #ce3820;
  }
}
</style>
<style lang="less">
.processInfo {
  overflow: auto;
  height: 100%;
  .el-timeline-item {
    padding-bottom: 120px;
  }
  .el-timeline-item__timestamp.is-top {
    position: absolute;
    left: -50px;
    color: #205081;
    /* font-weight: bold; */
    font-family: zcool-gdh;
    font-size: 12px;
  }
  .el-timeline-item__wrapper {
    padding: 0px 15px;
  }
  //   .timeLineDate .el-timeline-item:last-child .el-timeline-item__tail{
  //       display: none;

  //   }
}
</style>
